<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="../static/css/smartsite/css/bootstrap.min.css" th:href="@{/css/smartsite/css/bootstrap.min.css}" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/smartsite/css/reset.css" th:href="@{/css/smartsite/css/reset.css}">
    <link rel="stylesheet" href="../static/css/smartsite/css/all.css" th:href="@{/css/smartsite/css/all.css}">
</head>

<body>
    <!-- 环境监测 -->
    <div class="row rowmain environment">
        <div class="col-md-3 left" style="width: 29%;">
            <div class="box box1">
                <p class="box-title">今日报警信息</p>
                <p class="p-title"><span>阵列显示</span></p>
                <table class="table-thead">
                    <tbody>
                        <tr>
                            <td>所在项目</td>
                            <td>报警类型</td>
                            <td>报警数值</td>
                            <td>报警时间</td>
                        </tr>
                    </tbody>
                </table>

                <div style="overflow: hidden; height: 85%;">
                    <table class="table-body" style="table-layout:fixed;width: 100%;margin-top: 10px;">
                        <tbody>
                            <tr>
                                <td>海航YOHO湾sdgdfgdfhdfh</td>
                                <td>pm25/pm10</td>
                                <td>43/313.3</td>
                                <td>2019-12-04 14:57:10</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>pm25/pm10</td>
                                <td>43/313.3</td>
                                <td>2019-12-04 14:57:10</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>pm25/pm10</td>
                                <td>43/313.3</td>
                                <td>2019-12-04 14:57:10</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>pm25/pm10</td>
                                <td>43/313.3</td>
                                <td>2019-12-04 14:57:10</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>pm25/pm10</td>
                                <td>43/313.3</td>
                                <td>2019-12-04 14:57:10</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>pm25/pm10</td>
                                <td>43/313.3</td>
                                <td>2019-12-04 14:57:10</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>pm25/pm10</td>
                                <td>43/313.3</td>
                                <td>2019-12-04 14:57:10</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>pm25/pm10</td>
                                <td>43/313.3</td>
                                <td>2019-12-04 14:57:10</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>pm25/pm10</td>
                                <td>43/313.3</td>
                                <td>2019-12-04 14:57:10</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>pm25/pm10</td>
                                <td>43/313.3</td>
                                <td>2019-12-04 14:57:10</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>pm25/pm10</td>
                                <td>43/313.3</td>
                                <td>2019-12-04 14:57:10</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>pm25/pm10</td>
                                <td>43/313.3</td>
                                <td>2019-12-04 14:57:10</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>pm25/pm10</td>
                                <td>43/313.3</td>
                                <td>2019-12-04 14:57:10</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>pm25/pm10</td>
                                <td>43/313.3</td>
                                <td>2019-12-04 14:57:10</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>pm25/pm10</td>
                                <td>43/313.3</td>
                                <td>2019-12-04 14:57:10</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>pm25/pm10</td>
                                <td>43/313.3</td>
                                <td>2019-12-04 14:57:10</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>pm25/pm10</td>
                                <td>43/313.3</td>
                                <td>2019-12-04 14:57:10</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>pm25/pm10</td>
                                <td>43/313.3</td>
                                <td>2019-12-04 14:57:10</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="box box2">
                <p class="box-title">所有设备</p>
                <p class="p-title"><span>看板</span></p>
                <table class="table-thead">
                    <tbody>
                        <tr>
                            <td>所在项目</td>
                            <td>监控编号</td>
                            <td>联系电话</td>
                        </tr>
                    </tbody>
                </table>
                <div style="overflow: auto; height: 85%;">
                    <table class="table-body" style="table-layout:fixed;width: 100%;margin-top: 10px;">
                        <tbody>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>khughk1525545</td>
                                <td>18874568541</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>khughk1525545</td>
                                <td>18874568541</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>khughk1525545</td>
                                <td>18874568541</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>khughk1525545</td>
                                <td>18874568541</td>
                            </tr>
                            <tr>
                                <td>海航YOHO湾</td>
                                <td>khughk1525545</td>
                                <td>18874568541</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-5" style="height: 100%;padding: 0;">
            <div class="box box3">
                <p class="box-title absolute">海航YOHO湾</p>
                <div class="box-content absolute-content">
                    <ul class="ybp">
                        <li class="first">
                            <ul class="ul-item">
                                <li>
                                    <div class="circle cor1">PM2.5</div>
                                    <p>20.1ug/m³</p>
                                </li>
                                <li>
                                    <div class="circle cor1">PM10</div>
                                    <p>48.6ug/m³</p>
                                </li>
                                <li>
                                    <div class="circle cor1">TSP</div>
                                    <p>0ug/m³</p>
                                </li>
                                <li>
                                    <div class="circle cor2">噪音</div>
                                    <p>41.6db</p>
                                </li>
                            </ul>
                        </li>
                        <li class="second">
                            <div class="ybp-box" id="ybp-box">
                                <div id="ybp"></div>
                            </div>
                            <div class="ybp-footer">
                                <ul class="color-bar">
                                    <li class="one">优</li>
                                    <li class="two">良</li>
                                    <li class="three">轻度污染</li>
                                    <li class="four">中度污染</li>
                                    <li class="fine">重度污染</li>
                                    <li class="six">严重污染</li>
                                </ul>
                            </div>
                        </li>
                        <li class="three">
                            <ul class="ul-item">
                                <li>
                                    <div class="circle cor3">风速</div>
                                    <p>0m/s</p>
                                </li>
                                <li>
                                    <div class="circle cor3">风向</div>
                                    <p>东北风</p>
                                </li>
                                <li>
                                    <div class="circle cor3">温度</div>
                                    <p>
                                        14.3℃</p>
                                </li>
                                <li>
                                    <div class="circle cor3">湿度</div>
                                    <p>11.5%</p>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="box box4">
                <p class="box-title">喷淋信息</p>
                <p class="p-title"><span>查看更多</span></p>
                <table class="table-thead">
                    <tbody>
                        <tr>
                            <td>喷淋时间</td>
                            <td>状态</td>
                            <td>喷淋类型</td>
                        </tr>
                    </tbody>
                </table>
                <ul class="ul-table ut3 ul-tbody">
                    <li style="text-align: center;"><span style="width: 100%;">暂无数据</span></li>
                </ul>
            </div>
        </div>
        <div class="col-md-3 left" style="width: 29%;">
            <div class="box box5">
                <p class="box-title box_margin">24小时PM2.5,PM10的平均浓度</p>
                <div class="p-title"><span></span>
                    <ul class="u-btn">
                        <li class="active">实时</li>
                        <li class="">当月</li>
                    </ul>
                </div>
                <div class="box-content">
                    <div id="noise1"></div>
                </div>
            </div>
            <div class="box box5">
                <p class="box-title">24小时噪音统计</p>
                <div class="p-title"><span></span>
                    <ul class="u-btn">
                        <li class="active">实时</li>
                        <li class="">当月</li>
                    </ul>
                </div>
                <div class="box-content">
                    <div id="noise2"></div>
                </div>
            </div>
            <div class="box box5">
                <p class="box-title">15天AQI指数</p>
                <div class="p-title"><span></span>
                    <ul class="u-btn">
                        <li class="active">实时</li>
                        <li class="">当月</li>
                    </ul>
                </div>
                <div class="box-content">
                    <div id="noise3"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
    <script src="../static/js/smartsite/js/echarts@3.1.9.js" th:src="@{/js/smartsite/js/echarts@3.1.9.js}"></script>
    <script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=3.2.0}"></script>
    <script src="../static/js/smartsite/js/environment.js" th:src="@{/js/smartsite/js/environment.js}"></script>
</body>

</html>